<template>
  <div class="register">
    <div class="main">
      <div class="main_header">
        <div class="logo"><img src="../../assets/logo.png" alt="" /></div>
        <div class="sub_logo">
          <img src="../../assets/subLogo.png" alt="" />
        </div>
      </div>
      <!-- 注册表单 -->
      <div class="main_form">
        <h5>注册万表会员</h5>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              type=""
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <!-- 手机 -->
          <el-form-item prop="phone">
            <el-input
              type=""
              v-model="ruleForm.phone"
              autocomplete="off"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <!-- 图形验证码 -->
          <el-form-item prop="code">
            <el-input
              type=""
              v-model="ruleForm.code"
              autocomplete="off"
              placeholder="请输入图形验证码"
            ></el-input>
            <div class="code" v-html="codePic" @click="getCode"></div>
          </el-form-item>
          <!-- 短信验证码 -->
          <el-form-item prop="sms">
            <el-input
              type=""
              v-model="ruleForm.sms"
              autocomplete="off"
              placeholder="请输入短信验证码"
            ></el-input>
            <button class="sms" @click="getSms">获取验证码</button>
          </el-form-item>
          <!-- 设置密码 -->
          <el-form-item prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              placeholder="请设置密码"
              show-password
            ></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="请再次输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <!-- 立即注册 -->
          <el-form-item>
            <el-button @click="submitForm('ruleForm')">立即注册</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
          <p>
            点击“立即注册”，即表示您同意并愿意遵守<a
              href="https://www.wbiao.cn/help-25.html"
              target="_blank"
              >万表网用户协议</a
            >
          </p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getPicCode } from "@/services/code.js";
import { getSmsCode } from "@/services/sms.js";
import { register } from "@/services/register.js"

export default {
  data() {
    // 密码验证规则
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    // 确认密码验证规则
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 手机号验证规则
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else {
        callback();
      }
    };
    return {
      codePic: "",
      ruleForm: {
        username: "",
        phone: "",
        code: "",
        sms: "",
        pass: "",
        checkPass: "",
      },
      // 输入框验证
      rules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    // 用户信息格式验证
    checkinfo() {

    },
    // 图形验证码请求
    async getCode() {
      const res = await getPicCode();
      this.codePic = res.data.data;
    },
    // 短信验证码请求
    async getSms() {
      if (
        this.ruleForm.phone == /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      ) {
        const res = await getSmsCode({
          mobile: this.ruleForm.phone,
        });
        this.ruleForm.sms = res.data.result.code;
      }else {
        alert('手机号码格式不正确')
      }
    },
    open() {
        this.$message({
          message: '恭喜您注册成功，2s后跳转',
          type: 'success',
          duration: 2000
        });
      },
    submitForm(formName) {
      this.$refs[formName].validate( async (valid) => {
        if (valid) {
          const res = await register({
            name: this.ruleForm.username,
            phone: this.ruleForm.phone,
            password: this.ruleForm.pass,
          })
          if(res.status == 200){
            this.open()
            setTimeout(() =>{
              this.$router.push('/')
            },2000)
          }
          
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  .register {
    background-color: #fafafa;
    .main {
      width: 990px;
      height: 773px;
      margin: 0 auto;
      .main_header {
        display: flex;
        align-items: end;
        height: 115px;
      }
      // 注册表单容器
      .main_form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 644px;
        margin-top: 40px;
        background-color: #fff;
        border: 1px solid #f0f0f0;
        h5 {
          height: 58px;
          padding-bottom: 30px;
          font-size: 28px;
          font-weight: 400;
          text-align: center;
          padding-top: 50px;
        }
        // 注册表单
        .el-form {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 340px;
          height: 498px;
          .el-form-item {
            position: relative;
            width: 100%;
            .el-input {
              display: inline-block;
            }
            // 图形验证码、短信验证码
            .code,
            .sms {
              display: inline-block;
              width: 98px;
              height: 38px;
              background-color: #b1b1b1;
              vertical-align: middle;
              border: 1px solid;
              cursor: pointer;
            }
            &:nth-child(3),
            &:nth-child(4) {
              .el-input {
                width: 230px;
                vertical-align: middle;
                margin-right: 10px;
              }
            }
          }
          // 立即注册
          .el-button {
            width: 338px;
            height: 38px;
            margin-top: 30px;
            color: #fff;
            background-color: #b32424;
          }
          p {
            height: 58px;
            margin-top: 15px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
